<!-- 我的工作 -->

<template>
  <EasyCard class="WorkbenchPersonal-LeftWork" noScroll>
    <template #header>
      <MajorTitle title="我的工作" />
    </template>

    <WorkTab v-model="tab" :dict="TAB" class="full sixth" />

    <div class="full sixth5">
      <WorkRepair v-show="tab === TAB[0][0]" :ref="TAB[0][0]" class="full" />
      <WorkInspection v-show="tab === TAB[1][0]" :ref="TAB[1][0]" class="full" />
      <WorkMaintenance v-show="tab === TAB[2][0]" :ref="TAB[2][0]" class="full" />
      <WorkCleaning v-if="!CORE.MAP.TASK_NO_CLEANING" v-show="tab === TAB[3][0]" :ref="TAB[3][0]" class="full" />
    </div>
  </EasyCard>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

const TAB_DICT = [
  ['repair', '维修工单'],
  ['inspection', '巡检任务'],
  ['maintenance', '保养任务'],
  ['cleaning', '保洁任务'],
]

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'LeftWork',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      tab: 'repair', // 页签

      repair: {}, // 工单组件
      inspection: {}, // 巡检组件
      maintenance: {}, // 保养组件
      cleaning: {}, // 保洁组件
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 页签 【编号，名称，总数】
     */
    TAB() {
      const TAB = CORE.MAP.TASK_NO_CLEANING ? TAB_DICT.slice(0, -1) : TAB_DICT
      return TAB.map(([code, name]) => {
        const info = this[code].info || {}
        const total = (info.STATUS || []).reduce((total, item) => total + item[2], 0)
        return [code, name, total]
      })
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    TAB_DICT.forEach(([code]) => (this[code] = this.$refs[code]))
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
